<template>
  <div class="sign-in-page">
    <div class="page-header">
      <div class="back-btn" @click="$router.back()">←</div>
      <h1 class="page-title">每日签到</h1>
      <div class="empty-placeholder"></div>
    </div>

    <div class="sign-container">
      <div class="sign-status">
        <p v-if="signData.hasSigned" class="signed-tip">✅ 今日已签到，明日再来哦！</p>
        <p v-else class="unsign-tip">今日还没有签到，点击按钮签到吧！</p>
      </div>

      <div class="sign-btn-wrapper">
        <button class="sign-btn" @click="handleSign" :disabled="signData.hasSigned">
          {{ signData.hasSigned ? '今日已签到' : '立即签到' }}
        </button>
      </div>

      <div class="calendar-card">
        <div class="calendar-header">
          <span class="month">{{ signData.currentYear }}年{{ signData.currentMonth }}月</span>
          <div class="legend">
            <span><i class="signed-dot"></i> 已签到</span>
            <span><i class="today-dot"></i> 今日</span>
          </div>
        </div>

        <div class="week-row">
          <span v-for="w in weekDays" :key="w">{{ w }}</span>
        </div>

        <div class="calendar-dates">
          <div class="date-item empty" v-for="n in signData.emptyDays" :key="'empty-'+n"></div>
          <div class="date-item"
               v-for="day in signData.monthTotalDays"
               :key="day"
               :class="{
                 signed: signData.signedDays.includes(day),
                 today: day === signData.currentDay
               }">
            {{ day }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {ElMessage} from 'element-plus'
import {add, queryAll} from '../api/sgin.js'

export default {
  name: 'SignIn',
  data() {
    const now = new Date()
    return {
      weekDays: ['一', '二', '三', '四', '五', '六', '日'],
      signData: {
        currentYear: now.getFullYear(),
        currentMonth: now.getMonth() + 1,
        currentDay: now.getDate(),
        monthTotalDays: new Date(now.getFullYear(), now.getMonth() + 1, 0).getDate(),
        emptyDays: (new Date(now.getFullYear(), now.getMonth(), 1).getDay() || 7) - 1,
        hasSigned: false,
        signedDays: []
      }
    }
  },
  methods: {
    async loadData() {
        let {data: data} = await queryAll()
        const list = data.data || []
        const signedDays = new Set()
        /* ① 按后端数据重新校准年月（防止服务器/本地不一致） */
        if (list.length) {
          const first = new Date(list[0].date + 'T00:00:00')
          this.signData.currentYear = first.getFullYear()
          this.signData.currentMonth = first.getMonth() + 1
          this.signData.monthTotalDays = new Date(first.getFullYear(), first.getMonth() + 1, 0).getDate()
          this.signData.emptyDays = (new Date(first.getFullYear(), first.getMonth(), 1).getDay() || 7) - 1
        }
        /* ② 收集所有已签日期 */
        list.forEach(item => {
          if (item.status === 1) {
            const d = new Date(item.date + 'T00:00:00')
            signedDays.add(d.getDate())          // 只取几号
          }
        })
        /* ③ 更新状态 */
        this.signData.signedDays = Array.from(signedDays)
        this.signData.hasSigned = signedDays.has(this.signData.currentDay)
        console.log( this.signData.signedDays, '今日已签：', this.signData.hasSigned)
    },
    async handleSign() {
      if (this.signData.hasSigned) return
      let {data: data} = await add(this.signData)
      if (data.code === 200) {
        ElMessage.success('签到成功！')
        this.loadData()
      } else {
        ElMessage.error('签到失败')
      }
    }
  },
  mounted() {
    this.loadData()
  }
}
</script>

<style scoped>
/* 样式保持你原来的，不动 */
.sign-in-page {
  min-height: 100vh;
  background: #f5f7fa;
  padding-bottom: 60px
}

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: #409eff;
  color: #fff
}

.back-btn {
  cursor: pointer;
  font-size: 20px
}

.sign-container {
  padding: 20px
}

.sign-status {
  text-align: center;
  margin-bottom: 20px
}

.signed-tip {
  color: #67c23a;
  font-size: 15px
}

.unsign-tip {
  color: #666;
  font-size: 15px
}

.sign-btn-wrapper {
  text-align: center;
  margin-bottom: 30px
}

.sign-btn {
  width: 220px;
  height: 46px;
  border-radius: 25px;
  border: none;
  background: #409eff;
  color: #fff;
  font-size: 16px;
  cursor: pointer
}

.sign-btn:disabled {
  background: #ddd;
  color: #999;
  cursor: not-allowed
}

.calendar-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .05);
  padding: 16px
}

.calendar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px
}

.legend span {
  margin-left: 10px;
  font-size: 12px;
  color: #666
}

.signed-dot, .today-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%
}

.signed-dot {
  background: #67c23a
}

.today-dot {
  background: #409eff
}

.week-row {
  display: flex;
  justify-content: space-between;
  color: #999;
  font-size: 13px;
  margin-bottom: 5px
}

.week-row span {
  width: 14%;
  text-align: center
}

.calendar-dates {
  display: flex;
  flex-wrap: wrap;
  gap: 4px
}

.date-item {
  width: calc(14.28% - 4px);
  height: 36px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px
}

.date-item.empty {
  visibility: hidden
}

.date-item.signed {
  background: #eaffea;
  color: #67c23a;
  font-weight: bold
}

.date-item.today {
  background: rgba(64, 158, 255, .15);
  border: 1px solid #409eff;
  font-weight: bold;
  color: #409eff
}
</style>